
<!--<pro-header [title]="'查询表格'"></pro-header>-->
<div>
    <!--<a style=" color:red" (click)="getData()">-->
        <!--<i class="anticon anticon-plus"></i><span>保存</span>-->
    <!--</a>-->
    <!--<a style=" color:red;margin-left: 100px" (click)="addEl('-1')">-->
        <!--<i class="anticon anticon-plus"></i><span>生成节点</span>-->
    <!--</a>-->

    <!--<a style=" color:red;margin-left: 100px" (click)="addGroup('-1')">-->
        <!--<i class="anticon anticon-plus"></i><span>生成分组</span>-->
    <!--</a>-->


    <form class="process-form" nz-form>

        <div *ngFor="let l of list;let i = index" style="position: relative">
            <button *ngIf="l.type!='group'&&l.type!='end'&&l.type != 'grouping'" (click)="editNode(l,$event,'-1')"
                    style="width:100px;margin:20px;text-align: center;height:50px;line-height: 50px;border: 1px solid #000; position: relative">
                {{l.text}}
            </button>
            <a class="add-node" *ngIf="list?.length === (i + 1)" (click)="autoAddNode(i)">
                +
            </a>
        </div>

        <!--<div *ngFor="let l of list">-->
            <!--<button *ngIf="l.type=='end'" (click)="editNode(l)"-->
                    <!--style="width:100px;margin:20px;text-align: center;height:50px;line-height: 50px;border: 1px solid #000; position: relative">-->
                <!--{{l.text}}-->
            <!--</button>-->
        <!--</div>-->
    </form>
</div>
<nz-modal [nzWidth]='"900px"' [nzFooter]="''" [nzWrapClassName]="'vertical-center-modal'" [nzVisible]="modalVisible"
          [nzTitle]="'节点属性'" [nzOkText]="'确认'" [nzCancelText]="'取消'"
          [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalVisible=false" (nzOnOk)="save()">
    <ng-template #modalContent>

        <div *ngIf="!insertFlag&&currNode">
            <form nz-form [formGroup]="validateForm">
                <!--<div nz-form-item nz-row>-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required>id</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>-->
                        <!--{{currNode.id}}-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div nz-form-item nz-row *ngIf="currNode.type!='group'">-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required>分组id</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>-->
                        <!--{{currNode.group_id}}-->
                    <!--</div>-->
                <!--</div>-->
                <div nz-form-item nz-row *ngIf="currNode.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>当前节点名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-input formControlName="s1" [(ngModel)]="currNode.text" name="jm" [nzSize]="'large'"
                                  [nzPlaceHolder]="'请输入'"
                                  (nzChange)="nodeNameChange()"
                                  nzId="no"
                        ></nz-input>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>节点类型</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-select formControlName="s46" [(ngModel)]="currNode.type" name="status" nzId="status"
                                   [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'" >
                            <nz-option *ngFor="let i of ntypes; let idx = index" [nzLabel]="i.text"
                                       [nzValue]="i.value"></nz-option>
                        </nz-select>
                    </div>
                </div>
                <!--<div nz-form-item nz-row *ngIf="currNode.type!='grouping'&&currNode.type!='group'">-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required>下一步节点名称</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>-->
                        <!--<nz-select-->
                            <!--[nzMode]="'multiple'"-->
                            <!--formControlName="s6"-->
                            <!--[nzPlaceHolder]="'请选择节点'"-->
                            <!--[(ngModel)]="currNode.node_id"-->
                            <!--[nzNotFoundContent]="'无法找到'">-->
                            <!--<nz-option-->
                                <!--*ngFor="let option of nids"-->
                                <!--[nzLabel]="option.label"-->
                                <!--[nzValue]="option.value"-->
                                <!--[nzDisabled]="option.disabled">-->
                            <!--</nz-option>-->
                        <!--</nz-select>-->
                    <!--</div>-->
                <!--</div>-->

                <div *ngIf="currNode.type=='group'">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组名</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input formControlName="s3" [(ngModel)]="currNode.props.group_text" name="zm"
                                      [nzSize]="'large'"
                                      [nzPlaceHolder]="'请输入'"
                                      nzId="no"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>


                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组图片</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <button nz-button class="file-upload mt-sm">
                                <input id="file1" type="file" (change)="fileChange($event)"/>
                                <i class="anticon anticon-upload"></i><span>选择</span>
                            </button>
                            <button nz-button [nzType]="'primary'" (click)="savePdf()" class="mr-sm">
                                <span>上传</span>
                            </button>
                        </div>
                    </div>
                    <div nz-form-item nz-row>

                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">

                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <img [src]='rightSrc' style="width: 100px;height: 100px;margin-left: 217px;">
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组类型</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-select formControlName="s4" [(ngModel)]="currNode.props.group_type" name="status"
                                       nzId="status"
                                       [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
                                <nz-option *ngFor="let i of gtypes; let idx = index" [nzLabel]="i.text"
                                           [nzValue]="i.value"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <!--<div nz-form-item nz-row>-->
                        <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                            <!--<label for="email" nz-form-item-required>分组人数</label>-->
                        <!--</div>-->
                        <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>-->
                            <!--<nz-input formControlName="s5" [(ngModel)]="currNode.props.group_limit" name="gl"-->
                                      <!--[nzSize]="'large'"-->
                                      <!--[nzPlaceHolder]="'请输入'"-->
                                      <!--nzId="no"></nz-input>-->
                        <!--</div>-->
                    <!--</div>-->

                </div>

                <!--<div nz-form-item nz-row>-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required> 可见组</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>-->
                        <!--<nz-select-->
                            <!--[nzMode]="'multiple'"-->
                            <!--formControlName="s678"-->
                            <!--[nzPlaceHolder]="'请选择组'"-->
                            <!--[(ngModel)]="currNode.visibleGroup"-->
                            <!--[nzNotFoundContent]="'无法找到'">-->
                            <!--<nz-option-->
                                <!--*ngFor="let option of gids"-->
                                <!--[nzLabel]="option.label"-->
                                <!--[nzValue]="option.value"-->
                                <!--[nzDisabled]="option.disabled">-->
                            <!--</nz-option>-->
                        <!--</nz-select>-->
                    <!--</div>-->
                <!--</div>-->


                <!--<div *ngIf="currNode.type=='grouping'">-->
                    <!--<div nz-form-item nz-row>-->
                        <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                            <!--<label for="email" nz-form-item-required> 分组后节点</label>-->
                        <!--</div>-->
                        <!--<div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>-->
                            <!--<nz-select-->
                                <!--[nzMode]="'multiple'"-->
                                <!--formControlName="s67"-->
                                <!--[nzPlaceHolder]="'请选择节点'"-->
                                <!--[(ngModel)]="currNode.node_id"-->
                                <!--[nzNotFoundContent]="'无法找到'">-->
                                <!--<nz-option-->
                                    <!--*ngFor="let option of nids"-->
                                    <!--[nzLabel]="option.label"-->
                                    <!--[nzValue]="option.value"-->
                                    <!--[nzDisabled]="option.disabled">-->
                                <!--</nz-option>-->
                            <!--</nz-select>-->
                        <!--</div>-->
                    <!--</div>-->


                <!--</div>-->
            </form>
            <!--<div>-->

                <!--<button nz-button (click)="left(currNode.group_id)" [nzType]="'primary'" [nzSize]="'large'">-->
                    <!--<i class="anticon anticon-left-circle-o"></i>-->
                <!--</button>-->
                <!--<button style="margin-left: 50px" nz-button (click)="right(currNode.group_id)" [nzType]="'primary'" [nzSize]="'large'">-->
                    <!--<i class="anticon anticon-right-circle-o"></i>-->
                <!--</button>-->
            <!--</div>-->

            <br>
            <button nz-button (click)="gotoScenceEditor()" [nzType]="'primary'" [nzSize]="'large'"
                    *ngIf="currNode.type!='group'">
                <i class="anticon anticon-plus"></i><span>编辑场景</span>
            </button>
            <!--<a (click)="deleteNode()">删除</a>-->


        </div>
        <div *ngIf="insertFlag">
            <form nz-form [formGroup]="validateForm">
                <!--<div nz-form-item nz-row>-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required>id</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>-->
                        <!--{{insertModel.id}}-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div nz-form-item nz-row *ngIf="insertModel.type!='group'">-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required>分组id</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>-->
                        <!--{{insertModel.group_id}}-->
                    <!--</div>-->
                <!--</div>-->
                <div nz-form-item nz-row *ngIf="insertModel.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>当前节点名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-input formControlName="s1" [(ngModel)]="insertModel.text" name="jm" [nzSize]="'large'"
                                  [nzPlaceHolder]="'请输入'"
                                  nzId="no"></nz-input>
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="insertModel.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>节点类型</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-select formControlName="s46" [(ngModel)]="insertModel.type" name="status" nzId="status"
                                   [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
                            <nz-option *ngFor="let i of ntypes; let idx = index" [nzLabel]="i.text"
                                       [nzValue]="i.value"></nz-option>
                        </nz-select>
                    </div>
                </div>
                <!--<div nz-form-item nz-row *ngIf="insertModel.type!='grouping'&&insertModel.type!='group'">-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required>下一步节点名称</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>-->

                        <!--<nz-select-->
                            <!--[nzMode]="'multiple'"-->
                            <!--formControlName="s6"-->
                            <!--[nzPlaceHolder]="'请选择节点'"-->
                            <!--[(ngModel)]="insertModel.node_id"-->
                            <!--[nzNotFoundContent]="'无法找到'">-->
                            <!--<nz-option-->
                                <!--*ngFor="let option of nids"-->
                                <!--[nzLabel]="option.label"-->
                                <!--[nzValue]="option.value"-->
                                <!--[nzDisabled]="option.disabled">-->
                            <!--</nz-option>-->
                        <!--</nz-select>-->
                    <!--</div>-->
                <!--</div>-->

                <div *ngIf="insertModel.type=='group'">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组名</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input formControlName="s3" [(ngModel)]="insertModel.props.group_text" name="zm"
                                      [nzSize]="'large'"
                                      [nzPlaceHolder]="'请输入'"
                                      nzId="no"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>


                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组图片</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <button nz-button class="file-upload mt-sm">
                                <input id="file2" type="file" (change)="fileChange($event)"/>
                                <i class="anticon anticon-upload"></i><span>选择</span>
                            </button>
                            <button nz-button [nzType]="'primary'" (click)="savePdf()" class="mr-sm">
                                <span>上传</span>
                            </button>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <img [src]='rightSrc' style="width: 100px;height: 100px;margin-left: 217px;">
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组类型</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-select formControlName="s4" [(ngModel)]="insertModel.props.group_type" name="status"
                                       nzId="status"
                                       [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
                                <nz-option *ngFor="let i of gtypes; let idx = index" [nzLabel]="i.text"
                                           [nzValue]="i.value"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>分组人数</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input formControlName="s5" [(ngModel)]="insertModel.props.group_limit" name="gl"
                                      [nzSize]="'large'"
                                      [nzPlaceHolder]="'请输入'"
                                      nzId="no"></nz-input>
                        </div>
                    </div>

                </div>

                <!--<div nz-form-item nz-row>-->
                    <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                        <!--<label for="email" nz-form-item-required> 可见组</label>-->
                    <!--</div>-->
                    <!--<div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>-->
                        <!--<nz-select-->
                            <!--[nzMode]="'multiple'"-->
                            <!--formControlName="s678"-->
                            <!--[nzPlaceHolder]="'请选择组'"-->
                            <!--[(ngModel)]="insertModel.visibleGroup"-->
                            <!--[nzNotFoundContent]="'无法找到'">-->
                            <!--<nz-option-->
                                <!--*ngFor="let option of gids"-->
                                <!--[nzLabel]="option.label"-->
                                <!--[nzValue]="option.value"-->
                                <!--[nzDisabled]="option.disabled">-->
                            <!--</nz-option>-->
                        <!--</nz-select>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div *ngIf="insertModel.type=='grouping'">-->
                    <!--<div nz-form-item nz-row>-->
                        <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">-->
                            <!--<label for="email" nz-form-item-required> 分组后节点</label>-->
                        <!--</div>-->
                        <!--<div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>-->
                            <!--<nz-select-->
                                <!--[nzMode]="'multiple'"-->
                                <!--formControlName="s67"-->
                                <!--[nzPlaceHolder]="'请选择节点'"-->
                                <!--[(ngModel)]="insertModel.node_id"-->
                                <!--[nzNotFoundContent]="'无法找到'">-->
                                <!--<nz-option-->
                                    <!--*ngFor="let option of nids"-->
                                    <!--[nzLabel]="option.label"-->
                                    <!--[nzValue]="option.value"-->
                                    <!--[nzDisabled]="option.disabled">-->
                                <!--</nz-option>-->
                            <!--</nz-select>-->
                        <!--</div>-->
                    <!--</div>-->


                <!--</div>-->
            </form>
            <button nz-button (click)="insert()" [nzType]="'primary'" [nzSize]="'large'">
                <i class="anticon anticon-plus"></i><span>新增</span>
            </button>


        </div>
    </ng-template>
</nz-modal>

